<template>
  <div>
    <div>
      <div>
        <ChatMsg class="meassage" />
        <ChatInput />
      </div>
    </div>
  </div>
</template>

<script>
import ChatMsg from './chatMsg'
import ChatInput from './chatInput'

export default {
  name: 'Chat',
  components: { ChatMsg, ChatInput },

  data() {
    return {
      //
    }
  },
  computed: {
    //
    channel: function() {
      return this.$store.state.appChat.channel
    }
  },

  watch: {
    'channel.is_typing': function(val) {
      this.$store.dispatch('header/set', {
        title: `${this.channel.name} ${val ? '正在输入' : '...............'}`
      })
    }
  },

  async created() {
    //
    // this.$store.dispatch('user/getInfo')
    const { id } = this.$route.query
    const channel_id = parseInt(id)
    await this.$store.dispatch('appChat/initChannel', channel_id)
    this.$store.dispatch('header/set', {
      title: `${this.channel.name} ${
        this.channel.is_typing ? '正在输入' : '...............'
      }`
    })
  },

  mounted() {
    //
  },

  methods: {
    //
  }
}
</script>

<style type="text/css">
.message {
  width: 100%;
  height: 400px;
}
</style>
